<template>
  <div :id="id" class="map-box"></div>
</template>

<script>
import * as echarts from 'echarts'
import beihai from '@/views/bashboard/geo/beihai'

export default {
  name: 'MapChart',
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    data: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      chart: null,
      catchMap: null
    }
  },
  mounted() {
    // this.initChart()
    // clearInterval(this.timer)
    // this.timer = setInterval(() => {
    //   this.initChart()
    // }, 2000)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', () => {
      this.chart.resize()
    })
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    async initChart() {
      echarts.registerMap('beihai', beihai)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        geo: [
          {
            map: 'beihai',
            roam: false, // 是否允许缩放
            zoom: 2, // 默认显示级别
            center: [109.31, 21.679],
            tooltip: {
              backgroundColor: 'rgba(2,4,32,1)',
              textStyle: {
                color: '#22E5FF'
              },
              borderColor: '#23EDE6',
              borderWidth: 1
            },
            itemStyle: {
              normal: {
                areaColor: '#107FC1',
                borderColor: '#7AE6F1',
                borderWidth: 2,
                shadowColor: '#7AE6F1',
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 0
              },
              emphasis: {
                areaColor: '#00B0FF'
              }
            },
            zlevel: 2
          },
          {
            map: 'beihai',
            roam: false, // 是否允许缩放
            zoom: 2, // 默认显示级别
            center: [109.3, 21.689],
            itemStyle: {
              normal: {
                areaColor: '#00243C',
                borderColor: '#12797E',
                borderWidth: 2,
                shadowColor: '#12797E',
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 0.5
              }
            },
            zlevel: 1,
            silent: true
          }
        ],
        series: [
          {
            name: 'point',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol:
              'image://',
            symbolSize: [30, 55],
            symbolOffset: [0, '-33%'],
            label: {
              show: true,
              color: '#26FFC9',
              fontWeight: 600,
              position: 'top',
              formatter: function(params) {
                // console.log(params)
                return params.name
              }
            },
            emphasis: {
              label: {
                color: 'rgba(255,255,255,0)'
              },
              itemStyle: {
                color: '#26FFF5'
              }
            },
            tooltip: {
              backgroundColor: 'rgba(255,255,255,0)', // 去除背景
              borderColor: 'rgba(255,255,255,0)',
              padding: 0,
              position: function(point, params, dom, rect, size) {
                // 固定在图标相对位置
                return [rect.x - 150, rect.y - 100]
              },
              formatter: function(params) {
                var html = ''
                html = `<div style="background: rgba(2,4,32,1);padding: 15px;color: #22E5FF;border: 2px solid #23EDE6;border-radius: 15px;box-shadow: 0 0 5px #26FFF5">
                                    <div style="margin-bottom: 5px;font-weight: 600;color: #FFF">${params.name}</div>
                                    <div>今日检查总数：${params.data.message.checkCount}</div>
                                    <div>今日超重总数：${params.data.message.overrun}</div>
                                </div>`
                return html
              }
            },
            data: this.data,
            zlevel: 2
          }
        ]
      }
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption(option)
      this.chart.on('click', this.handleMap)
      window.addEventListener('resize', () => {
        if (this.chart) {
          this.chart.resize()
        }
      })
    },
    handleMap(e) {
      if (e.componentType !== 'series' || e.data.message.urls.length === 0 || !e.data.message.urls[0]) return
      // console.log('地图点击', e.data.message.urls)
      this.$emit('click-map', e.data.message)
    }
  }
}
</script>

<style scoped>
.map-box {
  height: 100%;
  width: 100%;
}
</style>
